import { Dayjs } from "dayjs";
import { CalendarProProps } from "./CalendarPro";
import getUuid from "@/utils/uuid";
import allLocales from "@/locale/Calendar";
import { useContext } from "react";
import LocaleContext from "@/Context/LocaleContext";
import classNames from "classnames";


interface MonthCalendarProps extends CalendarProProps {
    selectHandler?: (value: Dayjs) => void
    curMonth:Dayjs
}

function MonthCalendar(props: MonthCalendarProps) {

    /* 
    解构出 dateRender 、 dateInnerContent
    */
    const {  dateRender , dateInnerContent , value , selectHandler , curMonth } = props;

    // 解构出语言包
    const localeContext = useContext(LocaleContext)
    const CalendarLocale = allLocales[localeContext.locale]


	const weekList = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday']

	const getAllDays = (date: Dayjs) => {
		const startDate = date.startOf("month");
		const day = startDate.day();
		const daysInfo: Array<{ date: Dayjs; currentMonth: boolean }> =
			new Array(6 * 7);
		for (let i = 0; i < day; i++) {
			daysInfo[i] = {
				date: startDate.subtract(day - i, "day"),
				currentMonth: false,
			};
		}
		for (let i = day; i < daysInfo.length; i++) {
			const calcDate = startDate.add(i - day, "day");
			daysInfo[i] = {
				date: calcDate,
				currentMonth: calcDate.month() === date.month(),
			};
		}
		return daysInfo;
	};

	const allDays = getAllDays(curMonth);

	const renderDays = (
		days: Array<{ date: Dayjs; currentMonth: boolean }>,
        dateRender:MonthCalendarProps['dateRender'],
        dateInnerContent:MonthCalendarProps['dateInnerContent'],
        value:Dayjs,
        selectHandler:(value:Dayjs) => void
	) => {
		const rows = [];
		for (let i = 0; i < 6; i++) {
			const row = [];
			for (let j = 0; j < 7; j++) {
				const item = days[i * 7 + j];
				row[j] = (
					<div
                        key={item.date.toString()}
						className={
							"calendar-month-body-cell " +
							(item.currentMonth
								? "calendar-month-body-cell-current"
								: "")
						}
                        onClick={()=> selectHandler(item.date)}
					>
                        {/* 
                        渲染逻辑：
                         - 如果传递了 dateRender 那么完全按照 dateRender 渲染
                         - 如果没有 那么照常渲染 ， 并在最后渲染  dateInnerContent
                        */}
						{dateRender? dateRender(item.date) :(
                            <div className="calendar-month-body-cell-date">
                                <div className={classNames("calendar-month-body-cell-date-value" , value.format("YYYY-MM-DD") === item.date.format('YYYY-MM-DD') && "calendar-month-body-cell-date-selected" )}>{item.date.date()}</div>
                                <div className="calendar-month-body-cell-date-content">{dateInnerContent?.(item.date)}</div>
                            </div>
                        )}
					</div>
				);
			}
			rows.push(row);
		}
		return rows.map((row) => (
            <div key={getUuid()} className="calendar-month-body-row">
                {row}
            </div>)
        );
	};

	return (
		<div className="calendar-month">
			<div className="calendar-month-week-list">
				{weekList.map((week) => (
					<div className="calendar-month-week-list-item" key={week}>
						{ CalendarLocale.week[week] }
					</div>
				))}
			</div>
			<div className="calendar-month-body">
                { selectHandler && renderDays(allDays , dateRender , dateInnerContent , value , selectHandler )}
            </div>
		</div>
	);
}

export default MonthCalendar;
